<template>
    <div class="app-container">
        <el-tabs  tab-position="top" style="height: 700px ; width: 850px" ref="tabs">

            <el-tab-pane label="基本信息" key="addRoute">
                <template>
                    <el-card class="box-card">
                        <div>
                            <add-route :route="routeEntity" :operate="operate" @callback="handClostDialog" />
                        </div>
                    </el-card>
                </template>
            </el-tab-pane>

            <el-tab-pane label="路由插件" key="pluginTable">
                <template>
                    <el-card class="box-card">
                        <div>
                            <plugin-table ref="pluginTableRef" :routeId="routeEntity.id"/>
                        </div>
                    </el-card>
                </template>
            </el-tab-pane>
            <el-tab-pane label="新增插件" key="pluginList">
                <plugin-list :route="routeEntity" @callback="callback" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
import AddRoute from './addRoute';
import {PluginsByRouteId} from '@/api/kong/plugins'
import PluginTable from '../components/pluginTable';
import PluginList from "../components/pluginList"
export default {
    components:{
        AddRoute,
        PluginTable,
        PluginList,
    },
    props:{
        routeEntity:{
            type: Object,
            required: true,
        }
    },
    data () {
        return {
            operate: "edit",
            plugins:[],  
            routeId: "",
            open: false,
        }
    },
    created(){
        // console.log(JSON.stringify(this.routeEntity))
        const routeId=this.routeEntity.id;
        this.routeId=this.routeEntity.id;
        this.getPluginsByRouteId();

    },
    methods:{
        getPluginsByRouteId(){
            // 加载 路由相关的 插件信息
            // console.log("editRoute:"+routeId);
            PluginsByRouteId(this.routeId).then(res=>{
                this.plugins=res.rows;
                // console.log(JSON.stringify(this.plugins));
            })
        },
        handClostDialog(payload){
            this.$emit('callback',payload);
        },
        handleAddPlugin(){
            this.open=true;
        },
        callback(payload){
            // console.log("editroute:"+payload)
            // 路由插件列表更新
            this.$refs.pluginTableRef.headlePlugins();
        }
    }
    
}
</script>
<style scoped>

</style>